<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-plus"
        @click="handleUpdate(null)"
      >添加</el-button>

      <el-input
        @keyup.enter.native="handleFilter"
        style="width: 200px;"
        class="filter-item"
        placeholder="活动名称"
        v-model="filters.like$title"
      ></el-input>

      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        class="filter-item"
        type="primary"
        v-waves
        icon="el-icon-document"
        @click="exportExcelFile"
      >导出</el-button>
    </div>
    <el-table
      :data="list"
      @sort-change="sortChange"
      v-loading="listLoading"
      element-loading-text="给我一点时间"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" type="index" label="序号" width="80"></el-table-column>

      <el-table-column prop="title" align="center" label="活动名称" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.title}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="startDate" align="center" label="生效时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.startDate}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="endDate" align="center" label="失效时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.endDate}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="content" align="center" label="活动详情" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.content}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" align="center" label="创建时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="modifyTime" align="center" label="修改时间" width="120">
        <template slot-scope="scope">
          <span>{{scope.row.modifyTime}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100" prop="type" align="center" label="类型">
        <template slot-scope="scope">
          <el-tag :type="scope.row.type | typetagFilter">{{scope.row.type|typeFilter}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="params.page"
        :page-sizes="[10,20,30,50]"
        :page-size="params.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog :title="isEditing?'修改':'添加'" :visible.sync="dialogFormVisible">
      <el-form
        class="dialog-form"
        :rules="rules"
        ref="dataForm"
        :model="temp"
        label-position="left"
        label-width="120px"
      >
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="temp.title" placeholder="活动名称"></el-input>
        </el-form-item>

        <el-form-item label="生效时间" prop="startDate">
          <el-input v-model="temp.startDate" placeholder="生效时间"></el-input>
        </el-form-item>

        <el-form-item label="失效时间" prop="endDate">
          <el-input v-model="temp.endDate" placeholder="失效时间"></el-input>
        </el-form-item>

        <el-form-item label="活动详情" prop="content">
          <el-input v-model="temp.content" placeholder="活动详情"></el-input>
        </el-form-item>

        <el-form-item label="类型" prop="type">
          <el-select v-model="temp.type" placeholder="请选择">
            <el-option v-for="(item,value) in typeFilter" :key="value" :label="item" :value="value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" :loading="submiting" @click="submitFormAction">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
let typeFilter = ['专题活动', '优惠专区']
let typetagFilter = ['success', 'danger', 'info', 'warning']

export default {
  data () {
    return {
      temp: {
        id: '',

        title: '',

        startDate: '',

        endDate: '',

        content: '',

        type: ''
      },

      typeFilter: typeFilter,

      rules: {
        title: [
          {
            required: true,
            message: '活动名称不能为空',
            trigger: 'change',
            max: 50
          }
        ],

        startDate: [
          { required: true, message: '生效时间不能为空', trigger: 'change' }
        ],

        endDate: [
          { required: true, message: '失效时间不能为空', trigger: 'change' }
        ],

        content: [
          { required: true, message: '活动详情不能为空', trigger: 'change' }
        ],

        type: [{ required: true, message: '类型不能为空', trigger: 'change' }]
      }
    }
  },
  created () {
    this.init('discount_activity', 1).loadData()
  },
  filters: {
    typeFilter (status) {
      return typeFilter[parseInt(status)]
    },
    typetagFilter (status) {
      return typetagFilter[parseInt(status)]
    }
  },
  methods: {
    exportExcelFile () {
      this.exportExcel({
        title: '优惠活动',
        fields: [
          { field: 'title', title: '活动名称' },

          { field: 'startDate', title: '生效时间' },

          { field: 'endDate', title: '失效时间' },

          { field: 'content', title: '活动详情' },

          { field: 'createTime', title: '创建时间' },

          { field: 'modifyTime', title: '修改时间' },

          { field: 'type', title: '类型', valueMap: ['专题活动', '优惠专区'] }
        ]
      }).then(info => {
        this.openWin(info)
      })
    }
  }
}
</script>
